<template>
    <div class="w-100 h-100">
      <div style="font-size: 20px;margin-top: 26px;">
        <img src="../../../../assets/image/jianshe/title.png" alt="" />
        水质环境情况改善
      </div>
      <div style="height: calc(100% - 84px)">
        <div id="szdj" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  import tablleBar from "@/components/project/tablleBar.vue";
  import { useOptions } from "@/hook/useOptions";
  
  const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];

  const props = defineProps({
    year: {
        default: 2024
    }
  })
  
  const jsonData: any = inject("jsonData");
  const current = computed(() => {
    let data = [[], []];
    try {
      data = jsonData.value.yxjk.szdj[props.year];
    } catch (error) {}
    return data;
  });
  let myChart: any;
  
  watch(
    () => current.value,
    (val) => {
      if (val) {
        myChart.setOption({
          series: [{ data: val }],
        });
      }
    }
  );
  
  onMounted(() => {
    let option: any = {
      color: colorSingleList,
      tooltip: {
        trigger: "axis",
        borderColor: "transparent",
        backgroundColor: "rgba(28,64,81,0.7)",
        textStyle: {
          color: "white",
          fontSize: 20,
        },
      },
      grid: {
        left: "6%",
        right: "4%",
        bottom: "4%",
        top: "14%",
        containLabel: true,
      },
      //你的代码
      xAxis: {
        name: '日',
        type: "category",
        data: useOptions().year(),
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "#667A8E",
          },
        },
        axisLabel: {
          textStyle: {
            fontSize: 20,
            color: "#667A8E",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          name: "水质等级",
          type: "value",
          nameTextStyle: {
            color: "#8994A3",
            fontSize: 20,
          },
          axisLabel: {
            fontSize: 20,
            color: "#667A8E",
            formatter: "{value}" + "",
          },
          splitLine: {
            // 配置分割线
            show: true,
            lineStyle: {
              color: "rgba(92, 225, 255, 0.5)", // 蓝色分割线
              type: "solid", // 实线
            },
          },
        },
      ],
      series: [
    
        {
          name: "",
          type: "line",
          data: [],
          color: "rgba(184, 235, 143, 1)",
        },
      ],
    };
  
    myChart = echarts.init(document.getElementById("szdj") as HTMLElement);
    myChart.setOption(option);
  });
  </script>
  
  <style></style>
  